<template>
  <view class="page-wrapper">
    <!-- 滚动内容区域 -->
    <scroll-view scroll-y class="scroll-content" :style="{ height: contentHeight + 'px' }">
      <view class="container">
        <!-- 职位基本信息 -->
        <view class="job-header">
          <view class="job-title">{{jobDetail.jobName}}</view>
          <view class="job-salary">{{jobDetail.salary || '面议'}}</view>
        </view>
        
        <!-- 公司信息 -->
        <view class="company-info">
          <view class="company-name">{{jobDetail.companyName}}</view>
          <view class="company-tags">
            <text class="tag">{{getCompanyTypeText(jobDetail.companyType)}}</text>
            <text class="tag">{{jobDetail.jobAddress || '未知'}}</text>
          </view>
        </view>
        
        <!-- 职位详情 -->
        <view class="detail-section">
          <view class="section-title">职位描述</view>
          <view class="section-content">
            <view class="info-item">
              <text class="label">学历要求：</text>
              <text class="value">{{getDegreeText(jobDetail.degree)}}</text>
            </view>
            <view class="info-item">
              <text class="label">是否党员：</text>
              <text class="value">{{getWeaveText(jobDetail.isParty)}}</text>
            </view>
            <view class="info-item">
              <text class="label">是否应届：</text>
              <text class="value">{{getWeaveText(jobDetail.isFresh)}}</text>
            </view>
            <view class="info-item">
              <text class="label">招聘类型：</text>
              <text class="value">{{getTypeText(jobDetail.type)}}</text>
            </view>
            <view class="info-item">
              <text class="label">是否带编：</text>
              <text class="value">{{getWeaveText(jobDetail.isWeave)}}</text>
            </view>
            <view class="info-item">
              <text class="label">报名状态：</text>
              <text class="value status-text" :class="[getStatusClass(jobDetail.status)]">{{getStatusText(jobDetail.status)}}</text>
            </view>
    		<view class="info-item">
    		  <text class="label">报名时间：</text>
    		  <text class="value">{{ jobDetail.startDate && jobDetail.endDate ? `${jobDetail.startDate} ~ ${jobDetail.endDate}` : (jobDetail.endDate || '暂无') }}</text>
    		</view>
            <view class="info-item" v-if="jobDetail.noticeId">
              <text class="label">公告详情：</text>
              <text class="link-value" @tap="goToNoticeDetail(jobDetail.noticeId)">点击查看公告详情</text>
            </view>
            <view class="info-item" v-if="jobDetail.url">
              <text class="label">原文链接：</text>
              <text class="link-value" @tap="openOriginalLink(jobDetail.url)">点击复制到浏览器中进行查看</text>
            </view>
          </view>
        </view>
        
        <!-- 涉及专业 -->
        <view class="detail-section">
          <view class="section-title">涉及专业</view>
          <view class="section-content">
            <text class="description">{{jobDetail.aboutProfession || '不限'}}</text>
          </view>
        </view>
        
        <!-- 岗位要求 -->
        <view class="detail-section job-requirements">
          <view class="section-title">岗位要求</view>
          <view class="section-content">
            <rich-text class="requirement" :nodes="formatJobRequirements(jobDetail.request)" v-if="jobDetail.request"></rich-text>
            <text class="requirement" v-else>暂无要求</text>
          </view>
        </view>
        
        <!-- 底部占位，确保内容不被底部操作区遮挡 -->
        <view class="footer-placeholder"></view>
      </view>
    </scroll-view>
    
    <!-- 固定在底部的操作区域 -->
    <view class="footer">
      <template v-if="jobDetail.isLike === 0">
        <button class="apply-btn" @tap="handleLike">加入意向岗位</button>
      </template>
      <template v-else-if="jobDetail.isLike === 1">
        <button class="cancel-btn" @tap="handleCancelLike">取消意向岗位</button>
        <view class="service-buttons">
          <button class="service-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
            <view class="service-icon">📝</view>
            <text class="service-text">简历精改</text>
          </button>
          <button class="service-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
            <view class="service-icon">🎯</view>
            <text class="service-text">笔面辅导</text>
          </button>
        </view>
      </template>
    </view>
  
    <!-- 服务选择弹窗 -->
    <uni-popup ref="servicePopup" type="center" background-color="#fff" @change="popupChange">
      <view class="service-popup">
        <view class="popup-header">
          <text class="popup-title">选择附加服务</text>
          <text class="popup-close" @tap="closeServicePopup">×</text>
        </view>
        <view class="popup-content">
          <view class="popup-text">您的理想岗位已锁定！提升求职竞争力，获取专属服务</view>
          <view class="popup-subtext">专业辅导可提升80%的面试通过率和简历投递成功率</view>
          <view class="service-option">
            <button class="service-btn popup-service-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
              <view class="service-option-icon">📝</view>
              <view class="service-option-content">
                <text class="service-option-title">简历精改</text>
                <text class="service-option-desc">由行业专家一对一定制，突出核心优势，提升简历通过率</text>
              </view>
              <text class="service-option-arrow">›</text>
            </button>
          </view>
          <view class="service-option">
            <button class="service-btn popup-service-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
              <view class="service-option-icon">🎯</view>
              <view class="service-option-content">
                <text class="service-option-title">笔面辅导</text>
                <text class="service-option-desc">针对岗位特点进行专业辅导，掌握面试技巧，提高通过率</text>
              </view>
              <text class="service-option-arrow">›</text>
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getRecruitJobDetail, addLikeJob, cancelLikeJob } from '@/api/job/recruitJob.js'
import { getDicts } from '@/api/dict/data.js'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
export default {
  components: {
    uniPopup
  },
  data() {
    return {  
      jobId: '',
      jobDetail: {},
      // 是否字典名称
      yesOrNoDictType: 'recruit_yes_no',
      // 是否字典
      yesOrNoDict: [],
      // 招聘类型字典名称
      typeDictType: 'recruit_type',
      // 招聘类型字典
      typeDict: [],
      // 公司类型字典名称
      companyTypeDictType: 'recruit_company_type',
      // 公司类型字典
      companyTypeDict: [],
      // 学历要求字典名称
      degreeDictType: 'recruit_degree',
      // 学历要求字典
      degreeDict: [],
      // 报名状态字典名称
      applyStatusDictType: 'recruit_notice_status',
      // 报名状态字典
      applyStatusDict: [],
      // 选中的服务
      selectedServices: {
        resumeService: false,
        interviewService: false
      },
      // 内容区域高度
      contentHeight: 0
    }
  },
  async onLoad(options) {
    if (options.jobId) {
      this.jobId = options.jobId;
      // 先加载字典数据，确保字典加载完成后再获取职位详情
      await this.loadDictData();
      // 字典加载完成后，获取职位详情
      await this.getJobDetail();
      // 打印职位详情，帮助调试
      console.log('职位详情:', this.jobDetail);
      
      // 计算内容区域高度
      this.calculateContentHeight();
    }
  },
  
  onReady() {
    // 页面渲染完成后再次计算高度，确保准确
    this.calculateContentHeight();
  },
  
  // 监听页面显示
  onShow() {
    // 页面显示时重新计算高度
    this.calculateContentHeight();
  },
  
  // 监听窗口尺寸变化
  onResize() {
    this.calculateContentHeight();
  },
  methods: {
    // 获取职位详情
    async getJobDetail() {
      try {
        const res = await getRecruitJobDetail(this.jobId);
        if (res.code === 200) {
          this.jobDetail = res.data;
        } else {
          uni.showToast({
            title: res.msg || '获取详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
      }
    },
    
    // 加入意向岗位
    async handleLike() {
      try {
        // 只发送基本的添加意向岗位请求
        const params = {
          jobId: this.jobId
        };
        
        const res = await addLikeJob(params);
        if (res.code === 200) {
          // 请求成功后显示服务选择弹窗
          this.showServicePopup();
          
          // 刷新详情
          this.getJobDetail();
        } else {
          uni.showToast({
            title: res.msg || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
      }
    },
    
    // 取消意向岗位
    async handleCancelLike() {
      try {
        const res = await cancelLikeJob({jobId:this.jobId});
        if (res.code === 200) {
          uni.showToast({
            title: '已取消意向岗位',
            icon: 'success'
          });
          // 刷新详情
          this.getJobDetail();
        } else {
          uni.showToast({
            title: res.msg || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
      }
    },
    
    // 获取公司类型文本
    getCompanyTypeText(value) {
      console.log('获取公司类型文本, 值:', value, '类型:', typeof value);
      if (value === undefined || value === null || value === '') return '不限';
      const dictValue = String(value);
      console.log('转换后的公司类型dictValue:', dictValue);
      if (this.companyTypeDict && this.companyTypeDict.length > 0) {
        const dictItem = this.companyTypeDict.find(item => item.dictValue === dictValue);
        console.log('找到的公司类型字典项:', dictItem);
        if (dictItem) {
          return dictItem.dictLabel;
        }
      }
      return '不限';
    },
    
    // 获取学历文本
    getDegreeText(value) {
      console.log('获取学历文本, 值:', value, '类型:', typeof value);
      if (value === undefined || value === null || value === '') return '不限';
      const dictValue = String(value);
      console.log('转换后的学历dictValue:', dictValue);
      if (this.degreeDict && this.degreeDict.length > 0) {
        const dictItem = this.degreeDict.find(item => item.dictValue === dictValue);
        console.log('找到的学历字典项:', dictItem);
        if (dictItem) {
          return dictItem.dictLabel;
        }
      }
      return '不限';
    },
    
    // 获取招聘类型文本
    getTypeText(value) {
      console.log('获取招聘类型文本, 值:', value, '类型:', typeof value);
      if (value === undefined || value === null || value === '') return '不限';
      const dictValue = String(value);
      console.log('转换后的招聘类型dictValue:', dictValue);
      if (this.typeDict && this.typeDict.length > 0) {
        const dictItem = this.typeDict.find(item => item.dictValue === dictValue);
        console.log('找到的招聘类型字典项:', dictItem);
        if (dictItem) {
          return dictItem.dictLabel;
        }
      }
      return '不限';
    },
    
    // 获取是否文本
    getWeaveText(value) {
      console.log('获取是否文本, 值:', value, '类型:', typeof value);
      if (value === undefined || value === null || value === '') return '不限';
      const dictValue = String(value);
      console.log('转换后的是否dictValue:', dictValue);
      if (this.yesOrNoDict && this.yesOrNoDict.length > 0) {
        const dictItem = this.yesOrNoDict.find(item => item.dictValue === dictValue);
        console.log('找到的是否字典项:', dictItem);
        if (dictItem) {
          return dictItem.dictLabel;
        }
      }
      return value == 1 ? '是' : value == 0 ? '否' : '不限';
    },

    // 打开原文链接
    openOriginalLink(url) {
      if (url) {
        // #ifdef H5
        window.open(url, '_blank');
        // #endif
        
        // #ifdef APP-PLUS
        plus.runtime.openURL(url);
        // #endif
        
        // #ifdef MP
        uni.setClipboardData({
          data: url,
          success: () => {
            uni.showToast({
              title: '链接已复制',
              icon: 'success'
            });
          }
        });
        // #endif
      }
    },
    
    // 格式化岗位要求，处理换行和特殊字符
    formatJobRequirements(text) {
      if (!text) return '';
      
      // 替换换行符为HTML换行标签
      let formattedText = text.replace(/\n/g, '<br>');
      
      // 处理可能的特殊字符
      formattedText = formattedText.replace(/&/g, '&amp;')
                                  .replace(/</g, '&lt;')
                                  .replace(/>/g, '&gt;');
      
      return formattedText;
    },
    
    // 加载字典数据
    async loadDictData() {
      try {
        // 并行加载所有字典数据
        const [yesOrNoRes, typeRes, companyTypeRes, degreeRes, applyStatusRes] = await Promise.all([
          getDicts(this.yesOrNoDictType),
          getDicts(this.typeDictType),
          getDicts(this.companyTypeDictType),
          getDicts(this.degreeDictType),
          getDicts(this.applyStatusDictType)
        ]);
        
        // 设置字典数据
        if (yesOrNoRes.code === 200) {
          this.yesOrNoDict = yesOrNoRes.data;
          console.log('是否字典数据:', this.yesOrNoDict);
        }
        
        if (typeRes.code === 200) {
          this.typeDict = typeRes.data;
          console.log('招聘类型字典数据:', this.typeDict);
        }
        
        if (companyTypeRes.code === 200) {
          this.companyTypeDict = companyTypeRes.data;
          console.log('公司类型字典数据:', this.companyTypeDict);
        }
        
        if (degreeRes.code === 200) {
          this.degreeDict = degreeRes.data;
          console.log('学历字典数据:', this.degreeDict);
        }
        
        if (applyStatusRes.code === 200) {
          this.applyStatusDict = applyStatusRes.data;
          console.log('报名状态字典数据:', this.applyStatusDict);
        }
      } catch (error) {
        console.error('加载字典数据失败', error);
      }
    },
    
    // 计算内容区域高度
    calculateContentHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        const footerHeight = 160; // 底部操作区域高度，根据实际情况调整
        
        // 计算内容区域高度 = 屏幕高度 - 底部区域高度
        this.contentHeight = systemInfo.windowHeight - uni.upx2px(footerHeight);
      } catch (e) {
        console.error('获取系统信息失败', e);
        // 设置一个默认值
        this.contentHeight = 600;
      }
    },
    
    // 显示服务选择弹窗
    showServicePopup() {
      // 重置选择状态
      this.selectedServices = {
        resumeService: false,
        interviewService: false
      };
      // 打开弹窗
      this.$refs.servicePopup.open();
    },
    
    // 关闭服务选择弹窗
    closeServicePopup() {
      this.$refs.servicePopup.close();
    },
    
    // 弹窗状态变化回调
    popupChange(e) {
      // 弹窗关闭时的处理
      if (!e.show) {
        // 可以在这里添加额外的清理逻辑
      }
    },
    
    // 跳转到公告详情页面
    goToNoticeDetail(noticeId) {
      if (!noticeId) {
        uni.showToast({
          title: '未找到公告ID',
          icon: 'none'
        });
        return;
      }
      
      uni.navigateTo({
        url: `/pagesA/recruitNotice/detail?noticeId=${noticeId}`
      });
    },
    
    // 切换服务选择状态
    toggleService(service) {
      this.selectedServices[service] = !this.selectedServices[service];
    },
    
    // 获取状态文本
    getStatusText(value) {
      if (value === undefined || value === null || value === '') return '未知状态';
      const dictValue = String(value);
      if (this.applyStatusDict && this.applyStatusDict.length > 0) {
        const dictItem = this.applyStatusDict.find(item => item.dictValue === dictValue);
        if (dictItem) {
          return dictItem.dictLabel;
        }
      }
      
      // 回退到基础状态文本
      const statusMap = {
        1: '即将报名',
        2: '正在报名',
        3: '即将截止',
        4: '结束报名'
      };
      return statusMap[value] || '未知状态';
    },
    
    // 获取状态样式类
    getStatusClass(value) {
      const classMap = {
        1: 'status-upcoming',    // 即将报名
        2: 'status-ongoing',     // 正在报名
        3: 'status-ending',      // 即将截止
        4: 'status-ended'        // 结束报名
      };
      return classMap[value] || '';
    },
    
  }
}
</script>

<style>
.page-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  width: 100%;
}

.container {
  padding: 24rpx;
  background: #f5f7fa;
}

.footer-placeholder {
  height: 220rpx; /* 根据底部区域高度调整 */
}

.job-header {
  background: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.job-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.job-salary {
  font-size: 32rpx;
  color: #ff7043;
  font-weight: bold;
}

.company-info {
  background: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.company-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.company-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background: #f0f2f5;
  color: #666;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  margin-right: 16rpx;
  margin-bottom: 8rpx;
}

.detail-section {
  background: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  position: relative;
  padding-left: 24rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background: #007aff;
  border-radius: 4rpx;
}

.section-content {
  color: #666;
  font-size: 28rpx;
  line-height: 1.6;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
}

.label {
  color: #999;
  width: 160rpx;
}

.value {
  flex: 1;
  color: #333;
}

.link-value {
  flex: 1;
  color: #007aff;
  position: relative;
  display: inline-block;
  padding-right: 32rpx;
}

.link-value::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24rpx;
  height: 24rpx;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007aff"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>') no-repeat center;
  background-size: contain;
}

.link-value:active {
  opacity: 0.7;
}

.description, .requirement {
  white-space: pre-wrap;
  word-break: break-all;
  width: 100%;
  display: block;
  line-height: 1.8;
}

.job-requirements .section-content {
  padding: 10rpx;
}

.job-requirements .requirement {
  white-space: normal;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx 24rpx 30rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.apply-btn, .cancel-btn {
  background: linear-gradient(135deg, #007aff, #42a5f5);
  color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.2);
  transition: all 0.3s ease;
  border: none;
}

.apply-btn:active, .cancel-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.15);
}

.cancel-btn {
  background: linear-gradient(135deg, #ff7043, #ff5722);
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 16rpx rgba(255, 87, 34, 0.2);
}

.cancel-btn:active {
  box-shadow: 0 4rpx 8rpx rgba(255, 87, 34, 0.15);
}

.service-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 24rpx;
}

.service-btn {
  flex: 1;
  margin: 0 12rpx;
  height: 140rpx;
  background: #fff;
  border: 2rpx solid #e0e0e0;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  border-radius: 24rpx;
}

.service-btn:active {
  background: #f5f5f5;
  transform: scale(0.98);
}

.service-icon {
  font-size: 52rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.service-text {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  padding: 0 8rpx;
}

.original-link {
  margin-top: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-top: 1rpx solid #f0f2f5;
}

.link-text {
  font-size: 28rpx;
  color: #007aff;
}

.link-icon {
  font-size: 28rpx;
  color: #007aff;
  margin-left: 8rpx;
}

/* 服务选择弹窗样式 */
.service-popup {
  width: 650rpx;
  background-color: #fff;
  border-radius: 36rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  background: linear-gradient(90deg, #007aff, #42a5f5);
  -webkit-background-clip: text;
  color: transparent;
}

.popup-close {
  font-size: 44rpx;
  color: #999;
  height: 44rpx;
  width: 44rpx;
  line-height: 40rpx;
  text-align: center;
  border-radius: 50%;
  background-color: #f5f5f5;
  transition: all 0.2s ease;
}

.popup-close:active {
  background-color: #e0e0e0;
  transform: scale(0.95);
}

.popup-content {
  padding: 36rpx;
}

.popup-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
  line-height: 1.5;
}

.popup-subtext {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 32rpx;
  background-color: #f8f9fa;
  padding: 16rpx 24rpx;
  border-radius: 16rpx;
  border-left: 6rpx solid #007aff;
}

.service-option {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.popup-service-btn {
  width: 100%;
  height: auto;
  padding: 28rpx;
  border-radius: 20rpx;
  background: #f8f9fa;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.popup-service-btn:active {
  background: #e9ecef;
  transform: scale(0.98);
}

.popup-service-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  border-radius: 20rpx;
}

.service-option-icon {
  font-size: 44rpx;
  margin-right: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 90rpx;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(66, 165, 245, 0.1));
  border-radius: 50%;
  box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.1);
}

.service-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.service-option-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.service-option-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

.service-option-arrow {
  font-size: 44rpx;
  color: #007aff;
  margin-left: 10rpx;
  transition: transform 0.3s ease;
}

.popup-service-btn:active .service-option-arrow {
  transform: translateX(6rpx);
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  margin-right: 16rpx;
  position: relative;
}

.checkbox-selected {
  border-color: #007aff;
  background-color: #007aff;
}

.checkbox-selected::after {
  content: '';
  position: absolute;
  left: 12rpx;
  top: 6rpx;
  width: 12rpx;
  height: 20rpx;
  border: solid #fff;
  border-width: 0 3rpx 3rpx 0;
  transform: rotate(45deg);
}

.popup-footer {
  padding: 0 32rpx 32rpx;
}

.popup-btn {
  background: linear-gradient(135deg, #42a5f5, #1976d2);
  color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.3);
  transition: all 0.3s ease;
}

.popup-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.2);
}

/* 状态样式 */
.status-text {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  display: inline-block;
}

.status-upcoming {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

.status-ongoing {
  color: #67C23A;
  background-color: rgba(103, 194, 58, 0.1);
}

.status-ending {
  color: #E6A23C;
  background-color: rgba(230, 162, 60, 0.1);
}

.status-ended {
  color: #F56C6C;
  background-color: rgba(245, 108, 108, 0.1);
}
</style> 